<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "服务");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>


<style>
	.title {
			z-index: 0 !important;
		}
	.weui-navbar {
		z-index: 0;
	}
	
	.search{
		padding:10px 5px;
		border-bottom:1px solid #d9d9d9;
	}
	
	#test{
        display: flex;
    }
    
    .weui-search-bar{
     margin:2px 10px;
    	padding:0px;
    }
    
    .weui-search-bar__label{
    	background-color: #eee;
    }
    
    .weui-search-bar__box{
   	    background-color: #eee;
    }
    
    
    .tab li{
		min-width:120px;
		/* width:20%; */
	}
	a{
		color:#000;
	}
	.claim-green-pipe .weui-grid{
		width:50%;
		padding: 5px 0px;
	}
    
    .news_item1{
    	margin:13px 13px 13px 13px;
    }
     .news_item2{
    	margin:13px 13px 13px 0px;
    }
    

    
    .grid-button {
		width: 24.9%;
	}
	.active {
		color: #2196F3;
	}

	.weui-btn {
		font-size: 0.7rem;
		padding: 0;
		overflow: visible;
	}
	.weui-btn: after {
		border: 0;
	}
	
	.weui-btn_default {
		background-color: #fff;
	}
	.weui-btn_primary {
		background-color: #017cde;
	}
	.weui-btn_primary:not(.weui-btn_disabled):active {
	  	color: rgba(255, 255, 255, 0.6);
	  	background-color: #017cde;
	}
	.weui-grid {
		padding: 10px 5px;
	}
	.weui-grid:before {
		border: 0;
	}
	.weui-grid:after {
		border: 0;
	}
	.weui-grids {
		background-color: #fbfbfb;
	}
	.weui-grids:before {
		border: 0;
	} 
    
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jiUl9OGDPA8pWPKNXVfzzecmzcaGYqxt"></script>
<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>

<div class="weui-flex search">
    <div class="weui-flex__item " style="flex-grow:2;justify-content: center;align-items:center;" id="test">
        <input type="text" style="border:0px;font-size:15px;width:4.5rem;text-align:center;" readonly id="address">
    </div>

    <div class="weui-flex__item weui-search-bar " id="searchBar" style="flex-grow:7">
        <form class="weui-search-bar__form">
              <div class="weui-search-bar__box">
                  <i class="weui-icon-search"></i>
                  <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                  <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
              </div>
              <label class="weui-search-bar__label" id="searchText" >
                   <i class="weui-icon-search"></i>
                   <span>搜索</span>
              </label>
         </form>
    </div>
</div>


	<div class="tab-container" data-id="claim-container" id="claim-tab">
		<ul class="tab tab-horizontal" style="width:800px" id="first-menu">
			<c:forEach var="serviceTypeName" items="${serviceTypeNames}" varStatus="status">
				<li data-id="tab${status.index+1}" data-category="${serviceTypeName.id}">
					<span>${serviceTypeName.paramValue}</span>
				</li>
			</c:forEach>	
		</ul>
	</div>


	<div id="claim-container">
		<c:forEach var="serviceTypeName" items="${serviceTypeNames}" varStatus="status">
			<div class="tab-content" id="tab${status.index+1}">
						
			</div>	
		</c:forEach>
	</div>	


	

<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/tabmob.jsp"%>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>


<script type="text/javascript">

	$(function(){
	
		$("#first-menu li").first().addClass("active");
		$("#claim-container div").first().addClass("active");
		
		liChange();
		
		$("ul#first-menu").on("click","li",function(){
				liChange();
			});
		
	
		
		var url=$.getVirtualPath()+"/wechat/cust/personCenter/shareSignature";
		var href=encodeURI(window.location.href);
		
		var resultJson=$.getJsonPost(url,"href="+href);
		
		
		var config={
				debug: false,
			  	appId: resultJson.jsapiSignature.appId,// 公众号的唯一标识
			  	timestamp: resultJson.jsapiSignature.timestamp,// 生成签名的时间戳
			  	nonceStr: resultJson.jsapiSignature.nonceStr,// 生成签名的随机串
			  	signature: resultJson.jsapiSignature.signature,// 签名
			  	jsApiList: ['getLocation']
			}

		wx.config(config);
		
		wx.ready(function () {
			wx.getLocation({
			    type: 'wgs84', 
			    success: function (res) {
			        var latitude = res.latitude; //获取纬度
			        var longitude = res.longitude; //获取经度
			        var speed = res.speed; 
			        var accuracy = res.accuracy;
			     	// 百度地图API功能,根据经纬度逆解析地址
			    	var point = new BMap.Point(longitude,latitude);
			    	var geoc = new BMap.Geocoder();    
			    	geoc.getLocation(point, function(rs){
			    			var addComp = rs.addressComponents;
			    			$("#address").val(addComp.city);
			    		});        	    	
			    }
			});
		});
	
	});	

	function liChange(){
		var $li = $("#first-menu li.active");
		var parentId = $li.data("category");
		var forId = $li.data("id");
		var url = $.getVirtualPath()+"/wechat/ser/serIndex/secondMenu?parentId="+parentId+"&forId="+forId;
		var html = $.getText(url);
		$("#"+forId).html(html);
		
		/* 寻找默认的第一个a */
		var $a = $("#"+forId).find("a.active");
		var serviceTypeName = $li.find("span").html();
		var serviceName = $a.html();
		var goodsId = $a.data("id");
		var action = $.getVirtualPath()+"/wechat/ser/serIndex/goods?serviceTypeName="+serviceTypeName+"&serviceName="+serviceName;
		var ahtml = $.getText(action);
		$("#"+goodsId).html(ahtml); 
	}

	
</script>

<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>